<template>
  <div class="moment-page">
    <g-empty v-if="!loading && list.length === 0" />
    <template v-else>
      <moment-card
        v-for="(moment, index) in list"
        :key="moment.id"
        :data="moment"
        :user="user"
        @like="doLike($event, index)"
        @comment="setCommentVisible($event, moment)"
      />

      <div v-if="commentVisible" class="comment-container">
        <g-input v-model="comment" :cursor-spacing="10" :focus="true" :placeholder="placeholder" @blur="onBlur" />
        <van-button size="small" :disabled="!comment" type="primary" @click="onComment">发送</van-button>
      </div>
    </template>
  </div>
</template>

<script>
import MomentCard from './components/MomentCard.vue'
import loadMoreMixin from '@/mixins/loadMoreMixin'
import { getListByPage, doLike, comment } from './api'
import { mapGetters } from 'vuex'
import { Button } from 'vant'
import GInput from '@/components/GInput.vue'

export default {
  components: {
    MomentCard,
    [Button.name]: Button,
    GInput
  },
  mixins: [loadMoreMixin],
  data() {
    return {
      list: [],
      comment: '',
      targetUser: {},
      currentMoment: {},
      page: {
        limit: 5,
        page: 1
      },
      commentVisible: false
    }
  },
  computed: {
    ...mapGetters(['user']),
    placeholder() {
      return this.targetUser.userName ? `回复${this.targetUser.userName}: ` : '评论'
    }
  },
  onLoad() {
    this.loadMore()
  },
  methods: {
    async loadMore() {
      this.loading = true
      const { list = [] } = await getListByPage(this.page)
      this.list = this.list.concat(list)
      this.finished = list.length < this.page.limit
      this.loading = false
    },
    async doLike(data, index) {
      await doLike(data)
      if (data.type === 1) {
        const users = this.list[index].lkUsers
        const { userId, nickname: userName } = this.user
        console.log(userName)
        this.$set(this.list[index], 'lkUsers', [...users, { user_id: userId, userName }])
      } else {
        this.list[index].lkUsers = this.list[index].lkUsers.filter(item => item.user_id !== this.user.userId)
      }
    },
    setCommentVisible(targetUser = {}, moment) {
      this.comment = ''
      this.targetUser = targetUser
      this.currentMoment = moment
      this.commentVisible = true
    },
    async onComment() {
      const moment = this.currentMoment
      const data = {
        artcomId: moment.id,
        type: 0,
        comment: this.comment
      }
      if (this.targetUser.id) {
        const { id, userId } = this.targetUser
        data.type = 1
        data.toId = id
        data.toUserId = userId
      }
      await comment(data)
      this.$set(moment, 'comments', [...moment.comments, {
        ...data,
        userName: this.user.nickname,
        toUserName: this.targetUser.userName
      }])
      this.commentVisible = false
      this.comment = ''
    },
    onBlur() {
      setTimeout(() => {
        this.commentVisible = false
      }, 100)
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
